<template>
  <el-button type="primary" @click="$router.push('/home/swipeManage/addSwipe')">
    添加轮播图+
  </el-button>
  <el-table :data="pageList" style="width: 100%">
    <el-table-column
      type="index"
      label="序号"
      width="180"
      align="center"
    ></el-table-column>
    <el-table-column label="图片" width="180" align="center">
      <template #default="scope">
        <div
          class="demo-image__preview"
          style="display: flex; align-items: center"
        >
        <!-- initial-index: 指定预览图片下标 -->
        <!-- preview-teleported: 预览传送,插入至 body 元素上-->
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.img"
            :zoom-rate="1.2"
            :preview-src-list="[scope.row.img]"
            :initial-index="4"  
            fit="cover"
            preview-teleported
          />
        </div>
      </template>
    </el-table-column>
    <el-table-column
      label="名称"
      prop="alt"
      width="180"
      align="center"
    ></el-table-column>
    <el-table-column
      label="链接"
      prop="link"
      width="180"
      align="center"
    ></el-table-column>
    <el-table-column label="操作" width="180" align="center">
      <template #default="scope">
        <el-popconfirm
          title="您确定要删除吗?"
          @confirm="handleDelete(scope.$index, scope.row)"
        >
          <template #reference>
            <el-button type="danger">Delete</el-button>
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
    background
    layout="prev, pager, next"
    :page-size="5"
    :total="list.length"
    v-model:current-page="page"
  />
</template>

<script>
import { getSwipeList, removeSwipe } from "../../service/banner.js";
export default {
  data() {
    return {
      list: [],
      page: 1,
    };
  },
  created() {
    this.getSwipeListData();
  },
  methods: {
    getSwipeListData() {
      getSwipeList().then((res) => {
        if (res.code === "200") {
          this.list = res.data;
        }
      });
    },
    handleDelete(index, row) {
      console.log(index, row);
      removeSwipe(row.bannerid).then((res) => {
        if (res.code === "200") {
          this.getSwipeListData();
        }
      });
    },
  },
  computed: {
    pageList() {
      return this.list.slice((this.page - 1) * 5, this.page * 5);
    },
  },
};
</script>
<style scoped>
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>
